import React from 'react'
import { Menu } from '@arco-design/web-react';
import { Button, Space, Layout } from '@arco-design/web-react';
import { IconExport } from '@arco-design/web-react/icon';
import "@arco-design/web-react/dist/css/arco.css";
import './index.css'
import { useNavigate } from 'react-router-dom';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

export default function Header(props) {
  const navigate = useNavigate()
  const toHelp = () => {
    navigate('/help')
  }
  const toMain = () => {
    navigate('/main')
  }
  return (
    <div className='menu-demo'>
      <Menu mode='horizontal' theme='dark' defaultSelectedKeys={['1']}>
        {/* <MenuItem key='0' style={{ padding: 0, marginRight: 38 }} disabled> */}
        &nbsp;&nbsp;&nbsp;&nbsp; <img className="logo" src='logobook.png'></img>
        {/* </MenuItem> */}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <MenuItem key='1' className={'main-page'} onClick={toMain}>主页面</MenuItem>
        <MenuItem key='2' className={'help'} onClick={toHelp} >帮助</MenuItem>
        <Space size='large' className={'exit'}>
          <Button type='primary' icon={<IconExport />}> 退出阅读模式</Button>
        </Space>
      </Menu>
    </div>
  )
}

